<template>
  <div class="home-container">
    <!-- 左侧导航 -->
    <aside class="sidebar">
      <el-menu
        :default-active="activeMenu"
        class="el-menu-vertical-demo"
        background-color="#2f4050"
        text-color="#fff"
        active-text-color="#409eff"
        @select="handleMenuSelect"
      >
        <!-- 动态生成菜单（根据功能模块设计） -->
        <el-menu-item index="dashboard">
          <i class="el-icon-s-home"></i>
          <span>首页仪表盘</span>
        </el-menu-item>
        
        <el-sub-menu index="user">
          <template #title>
            <i class="el-icon-user-solid"></i>
            <span>用户管理</span>
          </template>
          <el-menu-item index="user/staff">员工信息管理</el-menu-item>
          <el-menu-item index="user/patient">患者信息管理</el-menu-item>
        </el-sub-menu>
        
        <el-sub-menu index="dept">
          <template #title>
            <i class="el-icon-office-building"></i>
            <span>科室与医生管理</span>
          </template>
          <el-menu-item index="dept/dept">科室设置</el-menu-item>
          <el-menu-item index="dept/doctor">医生管理</el-menu-item>
        </el-sub-menu>
        
        <el-sub-menu index="registration">
          <template #title>
            <i class="el-icon-s-order"></i>
            <span>挂号业务管理</span>
          </template>
          <el-menu-item index="registration/source">号源管理</el-menu-item>
          <el-menu-item index="registration/handle">挂号处理</el-menu-item>
          <el-menu-item index="registration/abandon">爽约管理</el-menu-item>
        </el-sub-menu>
        
        <el-sub-menu index="visit">
          <template #title>
            <i class="el-icon-s-finance"></i>
            <span>就诊流程管理</span>
          </template>
          <el-menu-item index="visit/call">分诊叫号</el-menu-item>
          <el-menu-item index="visit/record">就诊记录</el-menu-item>
        </el-sub-menu>
        
        <el-sub-menu index="statistics">
          <template #title>
            <i class="el-icon-s-data"></i>
            <span>统计分析</span>
          </template>
          <el-menu-item index="statistics/business">业务数据统计</el-menu-item>
          <el-menu-item index="statistics/operation">运营分析</el-menu-item>
          <el-menu-item index="statistics/report">报表生成</el-menu-item>
        </el-sub-menu>
        
        <el-sub-menu index="system">
          <template #title>
            <i class="el-icon-setting"></i>
            <span>系统设置</span>
          </template>
          <el-menu-item index="system/basic">基础数据维护</el-menu-item>
          <el-menu-item index="system/parameter">系统参数配置</el-menu-item>
          <el-menu-item index="system/interface">界面配置</el-menu-item>
        </el-sub-menu>
        
        <el-sub-menu index="integration">
          <template #title>
            <i class="el-icon-link"></i>
            <span>系统集成</span>
          </template>
          <el-menu-item index="integration/his">HIS系统集成</el-menu-item>
          <el-menu-item index="integration/payment">支付系统集成</el-menu-item>
        </el-sub-menu>
        
        <el-sub-menu index="security">
          <template #title>
            <i class="el-icon-shield"></i>
            <span>数据安全</span>
          </template>
          <el-menu-item index="security/backup">数据备份</el-menu-item>
          <el-menu-item index="security/log">操作日志</el-menu-item>
        </el-sub-menu>
      </el-menu>
    </aside>

    <!-- 右侧主内容 -->
    <div class="main-content">
      <header class="top-bar">
        <div class="time">{{ currentTime }}</div>
        <div class="user-info">
          <el-avatar :src="userAvatar" class="avatar" @error="handleAvatarError"></el-avatar>
          <span class="username">{{ username }}</span>
          <el-dropdown @command="handleLogout">
            <i class="el-icon-setting" style="margin-left: 20px; cursor: pointer;"></i>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="logout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </header>

      <!-- 面包屑导航 -->
      <el-breadcrumb class="breadcrumb" separator="/">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>{{ breadcrumbTitle }}</el-breadcrumb-item>
      </el-breadcrumb>

      <!-- 路由视图区域 -->
      <router-view />
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import { ElMessage, ElAvatar, ElDropdown, ElDropdownMenu, ElDropdownItem, ElBreadcrumb, ElBreadcrumbItem } from 'element-plus';
import { useRouter, useRoute } from 'vue-router';

const router = useRouter();
const route = useRoute();

// 模拟用户信息
const userInfo = ref({
  username: '超级管理员',
  avatar: '@/assets/images/avatar.png',
  role: 'admin' // 管理员角色
});

// 动态菜单（已根据功能模块设计完成）
const menuList = ref([
  { index: 'dashboard', label: '首页仪表盘', icon: 'el-icon-s-home' },
  { 
    index: 'user', 
    label: '用户管理', 
    icon: 'el-icon-user-solid',
    children: [
      { index: 'user/staff', label: '员工信息管理' },
      { index: 'user/patient', label: '患者信息管理' }
    ]
  },
  { 
    index: 'dept', 
    label: '科室与医生管理', 
    icon: 'el-icon-office-building',
    children: [
      { index: 'dept/dept', label: '科室设置' },
      { index: 'dept/doctor', label: '医生管理' }
    ]
  },
  // 其他菜单保持不变...
]);

// 当前激活的菜单
const activeMenu = computed(() => {
  return route.path.replace('/home/', '') || 'dashboard';
});

// 面包屑标题
const breadcrumbTitle = computed(() => {
  const menu = findMenuByIndex(activeMenu.value);
  return menu ? menu.label : activeMenu.value;
});

// 查找菜单项
const findMenuByIndex = (index) => {
  for (const item of menuList.value) {
    if (item.index === index) return item;
    if (item.children) {
      const child = item.children.find(c => c.index === index);
      if (child) return child;
    }
  }
  return null;
};

// 仪表盘数据
const todayRegistrations = ref(128);
const pendingRegistrations = ref(15);
const onDutyDoctors = ref(32);
const satisfactionRate = ref(96);

// 计算属性
const username = computed(() => userInfo.value.username);
const userAvatar = computed(() => userInfo.value.avatar);
const currentTime = computed(() => {
  const date = new Date();
  return (
    date.getFullYear() + '/' + 
    (date.getMonth() + 1).toString().padStart(2, '0') + '/' + 
    date.getDate().toString().padStart(2, '0') + ' ' + 
    date.getHours().toString().padStart(2, '0') + ':' + 
    date.getMinutes().toString().padStart(2, '0') + ':' + 
    date.getSeconds().toString().padStart(2, '0')
  );
});

// 方法
const handleMenuSelect = (key) => {
  router.push({ path: key.startsWith('/') ? key : `/${key}` });
  ElMessage.info(`进入 ${findMenuByIndex(key)?.label || key} 页面`);
};

const handleLogout = (command) => {
  if (command === 'logout') {
    localStorage.removeItem('isLoggedIn');
    router.push('/');
    ElMessage.success('退出登录成功');
  }
};

// 错误处理
const handleAvatarError = (e) => {
  e.target.src = '@/assets/images/default-avatar.png'; // 备用头像
};

// 初始化：根据用户角色过滤菜单
onMounted(() => {
  // 模拟权限过滤
  if (userInfo.value.role === 'doctor') {
    menuList.value = menuList.value.filter(menu => menu.label !== '财务管理');
  }
});
</script>

<style scoped>
/* 原有样式保持不变 */
.home-container { display: flex; height: 100vh; background-color: #f3f4f6; }
.sidebar { width: 200px; background-color: #2f4050; color: #fff; }
.el-menu-vertical-demo { border-right: none; }
.main-content { flex: 1; display: flex; flex-direction: column; }
.top-bar { height: 60px; background-color: #fff; display: flex; justify-content: space-between; align-items: center; padding: 0 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.time { font-size: 14px; color: #666; }
.user-info { display: flex; align-items: center; }
.avatar { width: 36px; height: 36px; margin-right: 10px; }
.username { font-size: 14px; color: #333; margin-right: 10px; }
.content { flex: 1; padding: 20px; overflow-y: auto; }
.breadcrumb {
  padding: 10px 20px;
  background-color: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  margin-bottom: 10px;
}
</style>